<!--
 * @Author: your name
 * @Date: 2020-12-16 13:16:24
 * @LastEditTime: 2021-09-08 23:22:42
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \huarongjijian-frontend\src\components\pc\BackTop\index.vue
-->
<template>
  <div class="back-top">
    <div class="back-box" @click="backTop">
      <img src="@/static/image/back_top.png" alt="" />
      <p>返回顶部</p>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {}
  },
  methods: {
    // 返回顶部
    backTop() {
      // 实现滚动效果
      const timeTop = setInterval(() => {
        let top = document.documentElement.scrollTop || document.body.scrollTop
        document.body.scrollTop = document.documentElement.scrollTop = top -= 50
        if (top <= 0) {
          clearInterval(timeTop)
        }
      }, 10)
    },
  },
}
</script>
<style scoped lang="scss">
.back-top {
  height: 175px;
  display: flex;
  align-items: center;
  flex-direction: column;
  .back-box {
    width: 52px;
    cursor: pointer;
    img {
      width: 50px;
    }
    p {
      font-size: 13px;
      color: #666666;
    }
  }
}
.mobile {
  .back-top {
    height: 40px;
    margin-top: 30px;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    .back-box {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      width: 150px;
      cursor: pointer;
      img {
        width: 25px;
      }
      p {
        text-align: center;
        width: 100%;
        font-size: 12px;
        color: #666666;
      }
    }
  }
}
</style>
